<template>
  <div class="bi_body">
    <div :class="isfull ? 'bi_top bi_top_fd' : 'bi_top'">
      <el-image :src="logo" style="width:149px;height:54px"></el-image>
      <div class="back_top">
      </div>
      <div class="returnclass" v-if="!isfull" @click="$emit('clear')"> <span><em>返回首页</em></span></div>
      <div class="dateright">
        <span style="position: relative;right: 10px;">{{ reatime }}</span>
      </div>
      <!-- <el-button v-show="!isfull" class="bi_topbtn animate__animated animate__bounceInDown" icon="el-icon-back"
        @click="$emit('clear')" circle></el-button> -->
      <!-- <h1>{{ reatime }}</h1> -->
    </div>
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="bi_topstatus">
          <div class="box">
            <p>正常率</p>
            <div class="grid-content">
              <div v-for="(item, index) in 60"
                :class="{ 'grid-reset': item % 2 !== 0 && item > $parent.percentage / 100 * 60, 'grid-two': item % 2 === 0, 'grid-item': true }"
                :key="index"></div>
            </div>
            <span v-if="$parent.percentage >= 60" class="bfbspan">{{ $parent.percentage }}%</span>
            <span v-else :class="$parent.percentage <= 20 ? 'bfbspan_er' : 'bfbspan_h'">{{ $parent.percentage }}%</span>

          </div>
          <!-- <el-progress :format="(percentage) => `正常率 ${percentage}%`" class="customColor" :text-inside="true"
            :stroke-width="28" :percentage="$parent.percentage"></el-progress> -->
        </div>
        <div class="bi_status" style="display: block;">
          <el-image :src="leftTop" class="left_img_top"></el-image>
          <el-image :src="rightTop" class="right_img_top"></el-image>
          <el-image :src="leftbottom" class="left_img_bottom"></el-image>
          <el-image :src="rightbottom" class="right_img_bottom"></el-image>
          <div class="top">
            <!-- <div class="icon_top"></div>
            <div class="icon_top_ti"></div>  -->
            <span>设备状态</span>
            <!-- <div class="icon_top_ti"></div>
            <div class="icon_top"></div> -->
          </div>
          <div style="flex:1;padding:20px">
            <div class=cont_hezi style="margin: 0 10px 10px 0;">
              <div class="leftimgs" :style="`background:url(${require('../../assets/images/icon.png')}) no-repeat`">
                <el-image :src="require('../../assets/images/bifx.gif')" class="ab_ponition"></el-image>
              </div>
              <div style="margin:10px 0px;color:#00FA9A">正常</div>
              <span v-if="$parent.normal" style="font-size:calc(100vw * 39/ 1920);">
                <span v-for="(item, index) in $parent.statusCount" :key="index">
                  <template v-if="item.status === '0'">
                    {{ item.count || 0 }}
                  </template>
                </span>
              </span>
              <span v-else style="font-size:calc(100vw * 39/ 1920);">
                0
              </span>
              <span style="color:#00CCFF">台</span>

            </div>
            <div class=cont_hezi style="margin: 0 0 10px 0;">
              <div class="leftimgs" :style="`background:url(${require('../../assets/images/icon02.png')}) no-repeat`">
                <el-image :src="require('../../assets/images/bifx.gif')" class="ab_ponition"></el-image>
              </div>
              <div style="margin:10px 0px;color:#FF5050">故障</div>
              <span v-if="$parent.normal3" style="font-size:calc(100vw * 39/ 1920);">
                <span v-for="(item, index) in $parent.statusCount" :key="index">
                  <template v-if="item.status === '3'">
                    {{ item.count || 0 }}
                  </template>
                </span>
              </span>
              <span v-else style="font-size:calc(100vw * 39/ 1920);">
                0
              </span>
              <span style="color:#00CCFF">台</span>
            </div>
            <div class=cont_hezi style="margin: 0 10px 10px 0;">
              <div class="leftimgs" :style="`background:url(${require('../../assets/images/icon03.png')}) no-repeat`">
                <el-image :src="require('../../assets/images/bifx.gif')" class="ab_ponition"></el-image>
              </div>
              <div style="margin:10px 0px;color:#FFCF4E">检修中</div>
              <span v-if="$parent.normal2" style="font-size:calc(100vw * 39/ 1920);">
                <span v-for="(item, index) in $parent.statusCount" :key="index">
                  <template v-if="item.status === '2'">
                    {{ item.count || 0 }}
                  </template>
                </span>
              </span>
              <span v-else style="font-size:calc(100vw * 39/ 1920);">
                0
              </span>
              <span style="color:#00CCFF">台</span>
            </div>
            <div class=cont_hezi style="margin: 0 0 10px 0;">
              <div class="leftimgs" :style="`background:url(${require('../../assets/images/icon04.png')}) no-repeat`">
                <el-image :src="require('../../assets/images/bifx.gif')" class="ab_ponition"></el-image>
              </div>
              <div style="margin:10px 0px;color:#B15CFF">带病运行</div>
              <span v-if="$parent.normal1" style="font-size:calc(100vw * 39/ 1920);">
                <span v-for="(item, index) in $parent.statusCount" :key="index">
                  <template v-if="item.status === '1'">
                    {{ item.count || 0 }}
                  </template>
                </span>
              </span>
              <span v-else style="font-size:calc(100vw * 39/ 1920);">
                0
              </span>
              <span style="color:#00CCFF">台</span>
            </div>

          </div>
        </div>
        <div class="bi_status">
          <el-image :src="leftTop" class="left_img_top"></el-image>
          <el-image :src="rightTop" class="right_img_top"></el-image>
          <el-image :src="leftbottom" class="left_img_bottom"></el-image>
          <el-image :src="rightbottom" class="right_img_bottom"></el-image>
          <div class="top">
            <!-- <div class="icon_top"></div>
            <div class="icon_top_ti"></div> -->
            <span>使用状态</span>
            <!-- <div class="icon_top_ti"></div>
            <div class="icon_top"></div> -->
          </div>
          <div style="flex:1;">
            <div id="EcharIdStatus" style="width: 100%; height: 100%" />
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="bi_CenterDiv">
          <el-image :src="leftTop" class="left_img_top"></el-image>
          <el-image :src="rightTop" class="right_img_top"></el-image>
          <el-image :src="leftbottom" class="left_img_bottom"></el-image>
          <el-image :src="rightbottom" class="right_img_bottom"></el-image>
          <div class="top">
            <!-- <div class="icon_top"></div>
            <div class="icon_top_ti"></div>  -->
            <span>设备巡检</span>
            <!-- <div class="icon_top_ti"></div>
            <div class="icon_top"></div> -->
          </div>
          <div :class="isfull ? 'map_hezi_sx' : 'map_hezi'">
            <div align="center" :class="isfull ? 'map_top_sx' : 'map_tophe'">
              <img @click="getinit" src="@/assets/images/tb01.png" style="cursor: pointer;width: 117px;height: 38px;">
              <img @click="() => twomap = !twomap" :class="!twomap ? 'gray' : ''" src="@/assets/images/tb02.png"
                style="cursor: pointer;width: 117px;height: 38px;">
              <img @click="() => threemap = !threemap" :class="!threemap ? 'gray' : ''" src="@/assets/images/tb03.png"
                style="cursor: pointer;width: 117px;height: 38px;">
            </div>
            <div class="map_body" id="container"></div>

            <img :class="llwidth < 1919 ? 'body_fangda' : 'body_fangda'"
              :src="isfull ? require('@/assets/images/btnxx.png') : require('@/assets/images/btnfd.png')"
              @click="() => isfull = !isfull" />
            <div class="map_position">
              <div class="map_router" v-show="twomap && routerList.length !== 0">
                <div v-for="(item, i) in routerList" :key="i" class="router_flex">
                  <template v-if="i < 8">
                    <div class="xian"
                      :style="{ 'background-color': ['#2accb3', '#3789de', '#b3b52a', '#ba2350', '#b55b2a', '#7020bb', '#c924a0', '#44ad28'][i] }">
                    </div>
                    <span> 巡检员:<span
                        :style="`font-weight: 900;color: ${['#2accb3', '#3789de', '#b3b52a', '#ba2350', '#b55b2a', '#7020bb', '#c924a0', '#44ad28'][i]};text-shadow: 0px 1px 5px;`"
                        v-for="(value, index) in item.inspectionRoutesInfoVos" :key="index">
                        {{ value.userName }} <span
                          v-if="item.inspectionRoutesInfoVos.length - 1 != index">,</span></span>
                    </span>
                  </template>
                </div>
              </div>
              <div class="map_position_two" v-show="threemap">
                <el-radio v-model="intOne" label="0" @input="remoberMester('1', '1', '0')">
                  <el-image :src="LvDa"
                    style="margin-right:10px;display:inline-block;cursor: pointer;width: 28px;height: 28px;vertical-align: middle;">
                  </el-image>
                  <span style="color:#fff">已巡检设备</span>
                </el-radio>
                <br><br>
                <el-radio v-model="intOne" label="1" @input="remoberMester('1', '0', '0')">
                  <el-image :src="Assay"
                    style="margin-right:10px;display:inline-block;cursor: pointer;width: 28px;height: 28px;vertical-align: middle;">
                  </el-image>
                  <span style="color:#fff">待巡检设备</span>
                </el-radio>
                <br><br>
                <el-radio v-model="intOne" label="2" @input="remoberMester('1', '2', '0')">
                  <el-image :src="RedDa"
                    style="margin-right:10px;display:inline-block;cursor: pointer;width: 28px;height: 28px;vertical-align: middle;">
                  </el-image>
                  <span style="color:#fff">延期巡检设备</span>
                </el-radio>
                <br><br>
                <el-radio v-model="intOne" label="3" @input="remoberMester('0', '1', '1')">
                  <el-image :src="Lvmin"
                    style="margin-right:10px;display:inline-block;cursor: pointer;width: 24px;height: 29px;vertical-align: middle;">
                  </el-image>
                  <span style="color:#fff">建筑物中设备已巡检</span>
                </el-radio>
                <br><br>
                <el-radio v-model="intOne" label="4" @input="remoberMester('0', '0', '1')">
                  <el-image :src="Huangmin"
                    style="margin-right:10px;display:inline-block;cursor: pointer;width: 24px;height: 29px;vertical-align: middle;">
                  </el-image>
                  <span style="color:#fff">建筑物中设备存在未巡检</span>
                </el-radio>
                <br><br>
                <el-radio v-model="intOne" label="5" @input="remoberMester('0', '2', '1')">
                  <el-image :src="Redmin"
                    style="margin-right:10px;display:inline-block;width: 24px;height: 29px;vertical-align: middle;">
                  </el-image>
                  <span style="color:#fff">建筑物中设备存在延期巡检</span>
                </el-radio>
                <br><br>
                <el-radio v-model="intOne" label="6" @input="generateMap(InfoList)">
                  <span style="color:#fff">展示全部</span>
                </el-radio>
              </div>
            </div>
          </div>
          <div style="flex:1;">
            <el-row style="width: 100%">
              <el-col :span="16">
                <!-- <div class="dateEcharts"> -->
                <el-scrollbar style="height:292px;width: 100%">
                  <div ref="dateid" style="width:100%;min-height: 292px;" />
                </el-scrollbar>
                <!-- </div> -->
              </el-col>
              <el-col :span="8">
                <el-scrollbar style="height:292px;width: 100%">
                  <div ref="presid" style="width: 100%; min-height: 292px;" />
                </el-scrollbar>
              </el-col>
            </el-row>
            <div align="center">
              <div align="center" class="datebottom">
                {{ textdate }}
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="bi_rightDivtop">
          <el-image :src="leftTop" class="left_img_top"></el-image>
          <el-image :src="rightTop" class="right_img_top"></el-image>
          <el-image :src="leftbottom" class="left_img_bottom"></el-image>
          <el-image :src="rightbottom" class="right_img_bottom"></el-image>
          <div class="top">
            <!-- <div class="icon_top"></div>
            <div class="icon_top_ti"></div> -->
            <span>设备保养</span>
            <!-- <div class="icon_top_ti"></div>
            <div class="icon_top"></div> -->
          </div>
          <div style="flex:1;">
            <el-row style="padding: 20px 10px;box-sizing: border-box;">
              <el-col :span="8" align="center">
                <div class="hq">
                  <div class="loader">
                  </div>
                  <div class="fdnr">
                    <strong><span style="font-size:calc(100vw * 40/ 1920);">{{ upkeepObj.upkeepCount || 0 }}</span><span
                        style="color:#34ECFF">台</span></strong>
                  </div>
                </div>
                <span
                  style="color:#00DCFF;font-weight:900;padding:4px 8px;border-radius: 5px;border: 1px solid #34ECFF;box-shadow:inset rgb(52 236 255) 0px 0px 5px 1px">保养中</span>

              </el-col>
              <el-col :span="8" align="center">
                <div class="hq_two">
                  <div class="loader_two">
                  </div>
                  <div class="fdnr">
                    <strong><span style="font-size:calc(100vw * 40/ 1920);">{{
                      upkeepObj.acceptanceCount ||
                        0
                    }}</span><span style="color:#FDEE19">台</span></strong>
                  </div>
                </div>
                <span
                  style="color:#EEDE00;font-weight:900;padding:4px 8px;border-radius: 5px;border: 1px solid #EEDE00;box-shadow:inset #EEDE00 0px 0px 5px 1px">待验收</span>

              </el-col>
              <el-col :span="8" align="center">
                <div class="hq">
                  <div class="loader_therr">
                  </div>
                  <div class="fdnr">
                    <strong><span style="font-size:calc(100vw * 40/ 1920);">{{
                      upkeepObj.completeCount ||
                        0
                    }}</span><span style="color:#3FD489">台</span></strong>
                  </div>
                </div>
                <span
                  style="color:#42EB98;font-weight:900;padding:4px 8px;border-radius: 5px;border: 1px solid #42EB98;box-shadow:inset #42EB98 0px 0px 5px 1px">已完成</span>


              </el-col>
            </el-row>
            <div style="margin:5px 10px;" class="my_table">
              <el-table ref="reftabel" :data="tableData" style="width: 100%;" :header-cell-style="{
                background: `url(${require('../../assets/images/bilan.png')})center no-repeat`, color: '#FFFFFF', 'background-size': 'cover', 'background-color': '#010339'
              }" :cell-style="cellStyle" :height="llwidth < 1919 ? '22vh' : '29vh'" @cell-mouse-enter="mouseEnter"
                @cell-mouse-leave="mouseLeave">
                <el-table-column prop="upkeepTaskNum" label="任务单号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="equipmentNum" label="设备编号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="equipmentName" label="设备名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="upkeepStatus" label="保养状态" width="100">
                  <template slot-scope="scope">
                    <dict-tag :options="upkeepStatus" :value="scope.row.upkeepStatus" />
                  </template>
                </el-table-column>
                <el-table-column prop="acceptanceStatus" label="验收状态">
                  <template slot-scope="scope">
                    <dict-tag :options="acceptanceStatus" :value="scope.row.acceptanceStatus" />
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </div>
        </div>
        <div class="bi_rightDivbtm">
          <el-image :src="leftTop" class="left_img_top"></el-image>
          <el-image :src="rightTop" class="right_img_top"></el-image>
          <el-image :src="leftbottom" class="left_img_bottom"></el-image>
          <el-image :src="rightbottom" class="right_img_bottom"></el-image>
          <div class="top">
            <!-- <div class="icon_top"></div>
            <div class="icon_top_ti"></div> -->
            <span>设备维修</span>
            <!-- <div class="icon_top_ti"></div>
            <div class="icon_top"></div> -->
          </div>
          <div style="flex:1;">
            <div ref="preweixiu" style="width: 100%; min-height: 18rem;" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import 'animate.css'
import { formatDateIndex } from '@/utils/index.js'
import * as echarts from 'echarts'
import logo from '@/assets/images/bilogo.png'
import leftTop from '@/assets/images/left_top.png'
import rightTop from '@/assets/images/right_top.png'
import leftbottom from '@/assets/images/left_bottom.png'
import rightbottom from '@/assets/images/right_bottom.png'
import imgicon from '@/assets/images/icon.png';
import Assay from '@/assets/images/u9988.png';
import LvDa from '@/assets/images/u189.png';
import RedDa from '@/assets/images/u209.png';
import Lvmin from '@/assets/images/u214.png';
import Huangmin from '@/assets/images/u217.png';
import Redmin from '@/assets/images/u221.png';
import Xrwgif from '@/assets/images/xrwgif.gif';
import QD from '@/assets/images/1qd.png';
import ZD from '@/assets/images/2zd.png';
import AMapLoader from '@amap/amap-jsapi-loader';
import { getrepairRecord, getupkeepRecord, getupkeepRecordlist, getinspectionTaskInfo, getinspectionRoutes } from '@/api/mianBody/index.js'


//安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '249c8810513321911bf1b25c975e075b',
}
export default {
  name: 'bi',
  props: ['Obj'],
  data () {
    return {
      llheight: window.screen.height,
      llwidth: window.screen.width,
      reatime: formatDateIndex(new Date()),
      isfull: false,
      loading: false,
      twomap: true,
      threemap: true,
      intOne: '6',
      imgicon: imgicon,
      logo: logo,
      Redmin,
      Assay,
      LvDa,
      RedDa,
      Lvmin,
      Xrwgif,
      QD,
      ZD,
      Huangmin,
      leftTop,
      rightTop,
      leftbottom,
      rightbottom,
      timeEchar: null,
      recordSetInterval: null,
      timerPreSetInterval: null,
      textdate: null,
      isdisbel: false,
      intnubmer: 1,
      intout: null,
      repairList: [],
      upkeepObj: {},
      tableData: [],
      InfoList: [],
      routerList: [],
      valTime: null,
      total: 0,
      table_interval: null
    }
  },
  computed: {
  },
  created () {
    console.log('浏览器当前分辨率', this.llwidth, '×', this.llheight);
    // if (this.llwidth < 1919) {
    //   this.threemap = false
    // }
  },
  mounted () {
    this.getinit()
    this.$nextTick(() => {
      this.initEcharts();
      this.timeinit();
    })
    this.textdate = `${this.$parent.TimeQuery[0] && this.$parent.TimeQuery[0] || this.$parent.getDay(-14)} ~  ${this.$parent.TimeQuery[1] && this.$parent.TimeQuery[1] || this.$parent.getDay(0)}`
    this.valTime = setInterval(() => {//30分钟更新一次
      this.getinit()
      this.$nextTick(() => {
        this.initEcharts();
        this.timeinit();
      })
    }, 300000);
    this.dataScrolling()//表格数据滚动
    this.lazyLoading();
  },
  destroyed () {
    clearTimeout(this.timeEchar)
    clearTimeout(this.recordSetInterval)
    clearTimeout(this.timerPreSetInterval)
    clearInterval(this.intout)
    clearInterval(this.valTime)
    clearInterval(this.table_interval);

  },
  methods: {
    /**表格数据滚动 */
    dataScrolling () {
      let dom = document.querySelector(".el-table__body-wrapper");
      this.table_interval = setInterval(() => {
        // 元素自增距离顶部1像素
        dom.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (dom.clientHeight + dom.scrollTop == dom.scrollHeight) {
          // 重置table距离顶部距离
          dom.scrollTop = 0;
        }
      }, 100); // 滚动速度
    },
    /**鼠标进入，停止滚动 */
    mouseEnter () {
      clearInterval(this.table_interval);
      this.table_interval = null
    },
    /**鼠标离开，开始滚动 */
    mouseLeave () {
      this.dataScrolling();
    },
    /**表格无限滚动懒加载 */
    lazyLoading () {
      let dom = document.querySelector(".el-table__body-wrapper");
      dom.addEventListener("scroll", (v) => {
        const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        // console.log("鼠标滑动-scrollDistance", scrollDistance)
        // if (scrollDistance <= 0) {  //分辨率问题，如果设置 100% ，滑倒最底部，scrollDistance的值 可能为 0.201 到 -0.201
        if (scrollDistance <= 1) {
          //等于0证明已经到底，可以请求接口
          if (this.intnubmer >= this.total) {
            //判断是否到达底部
            // this.$message.warning("我~是有底线的");
            console.log("我~是有底线的")
          }
          if (this.intnubmer < this.total) {
            //当前页数小于总页数就请求
            console.log("页面已经到达底部,可以请求接口,请求第 " + ++this.intnubmer + " 页数据");
            this.load()
          }
        }
      });
    },
    async load () {
      // console.log(2222);
      this.loading = true
      // // setTimeout(async () => {
      this.intnubmer++
      let { data: upkeepList, total: totals } = await getupkeepRecordlist({ pageNum: this.intnubmer, pageSize: 10, deptIdsCondition: this.$parent.deptIds });
      const arr = this.tableData
      this.total = totals
      this.tableData = arr.concat(upkeepList)
      this.loading = false
      // }, 2000);
    },
    async getinit () {
      this.loading = true
      let { data: repair } = await getrepairRecord({ deptIdsCondition: this.$parent.deptIds });
      this.repairList = [{ value: repair.stayCount, name: '待维修（不含委外）' }, { value: repair.completeCount, name: '已完成' }, { value: repair.maintenanceCount, name: '维修中' }]
      let { data: upkeep } = await getupkeepRecord({ deptIdsCondition: this.$parent.deptIds });
      this.upkeepObj = upkeep
      let { data: upkeepList, total: totals } = await getupkeepRecordlist({ pageNum: 1, pageSize: 10, deptIdsCondition: this.$parent.deptIds });
      this.tableData = upkeepList
      this.total = totals
      let { data: nTaskInfo } = await getinspectionTaskInfo({ deptIdsCondition: this.$parent.deptIds });
      let { data: router } = await getinspectionRoutes({ deptIdsCondition: this.$parent.deptIds })
      this.InfoList = nTaskInfo
      this.routerList = router
      this.loading = false
      this.$nextTick(() => {
        this.preInit();
      })
      this.initMap();
    },
    //渲染地图
    initMap () {
      const th = this
      AMapLoader.load({
        key: "d3c2d6765613d9728729a9c9afe9b78b",    // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.AutoComplete", "AMap.PlaceSearch", "AMap.ControlBar", "AMap.MouseTool"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", {  //设置地图容器id
          viewMode: "2D",    //是否为3D地图模式
          zoom: 17,           //初始化地图级别
          center: [114.031514, 22.534035], //初始化地图中心点位置
          resizeEnable: true,
          mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
        });
        th.markerList = []
        th.InfoList && th.InfoList.forEach(item => {
          var icon = new AMap.Icon({
            size: item.position == '1' ? new AMap.Size(28, 28) : new AMap.Size(24, 29),    // 图标尺寸
            image: item.position == '1' ? [th.Assay, th.LvDa, th.RedDa][item.inspectionTaskInfoList && item.inspectionTaskInfoList[0].status || 0] : [th.Huangmin, th.Lvmin, th.Redmin][item.inspectionTaskInfoList && item.inspectionTaskInfoList[0].status || 0],  // Icon的图像
            // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: item.position == '1' ? new AMap.Size(28, 28) : new AMap.Size(24, 29)   // 根据所设置的大小拉伸或压缩图片
          });
          var marker = new AMap.Marker({
            offset: new AMap.Pixel(-13, -26),
            position: new AMap.LngLat(item.longitude * 1, item.latitude * 1),
            icon: icon,
          });
          let text = `<div style='background:  url(${require('../../assets/images/bimapbg.png')}) no-repeat;background-size: cover;color:#fff;padding:5px 10px 20px 10px;border-radius:3px;'>`
          let texttwo = []
          if (item.position == '0') {
            text += `<br>建筑物名称 # ${item.buildingName}<br><br>`
          }
          item.inspectionTaskInfoList.forEach((element, index) => {
            if (index < 5) {
              texttwo.push(`<span style='color:${['#fec865', '#3dce8c', '#ff6974'][element.status]}'>${index + 1}. ${element.equipmentName}<span style='font-weight:900;float:right;padding:2px 4px;border-radius: 5px;border: 1px solid ${['#fec865', '#3dce8c', '#ff6974'][element.status]};box-shadow: 0 0 0 1px ${['#fec865', '#3dce8c', '#ff6974'][element.status]}, inset 0 0 10px ${['#fec865', '#3dce8c', '#ff6974'][element.status]};'>${['待巡检', '已巡检', '延期巡检'][element.status]}</span></span>`)
            } else if (index == 5) {
              texttwo.push(`......`)
            } else {
              return false
            }
          })
          let textstr = texttwo.join('<br><br>')
          let wei = `</div>`
          let texts = text + textstr + wei
          // 创建 infoWindow 实例	
          var infoWindow = new AMap.InfoWindow({
            content: texts,  //传入 dom 对象，或者 html 字符串
            isCustom: true,  //使用自定义窗体
            anchor: 'top-center',
          });
          let wenben = `<div style='background: url(${require('../../assets/images/bimapbg.png')}) no-repeat;background-size: cover;color:#fff;padding:15px 10px;border-radius:3px;max-height:250px;overflow:scroll;overflow-y: auto;overflow-x: auto;'>`
          let wenbentwo = []
          if (item.position == '0') {
            text += `<br>建筑物名称 # ${item.buildingName}<br><br>`
          }
          item.inspectionTaskInfoList.forEach((element, index) => {
            wenbentwo.push(`<span style='color:${['#fec865', '#3dce8c', '#ff6974'][element.status]}'>${index + 1}. ${element.equipmentName}<span style='font-weight:900;float:right;padding:2px 4px;border-radius: 5px;border: 1px solid ${['#fec865', '#3dce8c', '#ff6974'][element.status]};box-shadow: 0 0 0 1px ${['#fec865', '#3dce8c', '#ff6974'][element.status]}, inset 0 0 10px ${['#fec865', '#3dce8c', '#ff6974'][element.status]};'>${['待巡检', '已巡检', '延期巡检'][element.status]}</span></span>`)
          })
          let wenbenstr = wenbentwo.join('<br><br>')
          let neirong = wenben + wenbenstr + wei
          // 创建 infoWindow 实例	
          var infoWindowClick = new AMap.InfoWindow({
            content: neirong,  //传入 dom 对象，或者 html 字符串
            isCustom: true,  //使用自定义窗体
            anchor: 'top-center',
          });
          marker.on('click', function (e) {//标记鼠标悬浮
            infoWindowClick.open(th.map, [item.longitude * 1, item.latitude * 1]);
          });
          marker.on('mouseover', function (e) {//标记鼠标悬浮
            infoWindow.open(th.map, [item.longitude * 1, item.latitude * 1]);
          });
          marker.on('mouseout', function (e) {//标记鼠标离开
            infoWindow.close();
          });
          this.map.add(marker)
          th.markerList.push(marker)
          // this.map.addControl(new AMap.Scale());
        });
        th.routerList && th.routerList.forEach((item, index) => {//轨迹
          if (index < 8) {//最多展示八条线
            item.inspectionRoutesInfoVos.forEach((value, i) => {
              let path = []
              value.inspectionRoutesVoList.forEach(v => {
                path.push([v.longitude, v.latitude])
              })
              console.log(path);
              var distance = Math.round(AMap.GeometryUtil.distanceOfLine(path));
              // 创建折线实例
              var polyline = new AMap.Polyline({
                path: path,
                isOutline: false,
                borderWeight: 2, // 描边宽度，默认为 1
                outlineColor: '#fff',
                strokeWeight: 6,// 线条宽度
                showDir: true,
                cursor: 'pointer',
                strokeOpacity: 1,//线条透明度
                strokeColor: ['#2accb3', '#3789de', '#b3b52a', '#ba2350', '#b55b2a', '#7020bb', '#c924a0', '#44ad28'][index], // 线条颜色
                lineJoin: 'round' // 折线拐点连接处样式
              });
              // var distance = Math.round(AMap.GeometryUtil.distanceOfLine(path));
              let text = `<div align="center" style='font-size:14px;background: url(${require('../../assets/images/bikm.png')}) no-repeat;background-size: cover;color:#fff;padding:5px 10px;border-radius:3px;'>` +
                `<div>巡检里程:<span style="font-size:24px">${this.kmUnit(distance)}</span></div> <div style="color:#8CB8F4;text-decoration: underline;line-height:20px;margin:10px 0px">计划巡检时间:<span style="color:#78FDFF">${value.inspectionPlanDate}</span></div><div style="font-size:17px;margin-bottom:10px">巡检人:<span style="font-weight: 900;color: ${['#2accb3', '#3789de', '#b3b52a', '#ba2350', '#b55b2a', '#7020bb', '#c924a0', '#44ad28'][index]};text-shadow: 0px 1px 5px;">${value.userName}</span></div></div>`
              var infoWindow = new AMap.InfoWindow({
                content: text,
                isCustom: true
              });
              polyline.on('mouseover', function (e) {//标记鼠标悬浮
                infoWindow.open(th.map, [e.lnglat.lng, e.lnglat.lat])
                polyline.setOptions({ isOutline: true })
              });
              polyline.on('mouseout', function (e) {//标记鼠标离开
                infoWindow.close()
                polyline.setOptions({ isOutline: false })

              });
              var qd = new AMap.Icon({
                size: new AMap.Size(25, 32),    // 图标尺寸
                image: th.QD,  // Icon的图像
                // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(25, 32)   // 根据所设置的大小拉伸或压缩图片
              });

              var markerqd = new AMap.Marker({//设置起点图标
                offset: new AMap.Pixel(-13, -26),
                position: new AMap.LngLat(value.inspectionRoutesVoList[0].longitude * 1, value.inspectionRoutesVoList[0].latitude * 1),
                icon: qd,
                zIndex: 11
              });
              // 将折线添加至地图实例
              var icon = new AMap.Icon({
                size: value.status === '0' ? new AMap.Size(50, 58) : new AMap.Size(25, 32),    // 图标尺寸
                image: value.status === '0' ? th.Xrwgif : th.ZD,  // Icon的图像
                // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: value.status === '0' ? new AMap.Size(50, 58) : new AMap.Size(25, 32)  // 根据所设置的大小拉伸或压缩图片
              });
              var marker = new AMap.Marker({
                offset: value.status === '0' ? new AMap.Pixel(-20, -50) : new AMap.Pixel(-10, -5),
                position: new AMap.LngLat(value.inspectionRoutesVoList[value.inspectionRoutesVoList.length - 1].longitude * 1, value.inspectionRoutesVoList[value.inspectionRoutesVoList.length - 1].latitude * 1),
                icon: icon,
                zIndex: 10
              });
              this.map.add(marker)
              this.map.add(markerqd)

              this.map.add(polyline)

            })
          }
        });
        this.map.setFitView()
        this.map.addControl(new AMap.Scale());

      }).catch(e => {
        console.log(e);
      })
    },
    /**
     * 
     * @param {室内枚举} int 
     * @param {选择状态} status 
     * @param {室外枚举} ints 
     */
    remoberMester (int, status, ints) {
      let Arr = [];
      this.InfoList.filter(item => {//室内待巡检
        if (item.position === int) {
          let flitList = item.inspectionTaskInfoList.filter(value => {
            // if ((item.position === int && value.status !== status) || item.position === ints) {//禁用
            //   return { ...value }
            // }
            if ((item.position === int && value.status === status)) {//选中
              return { ...value }
            }
          })
          Arr.push({
            ...item,
            inspectionTaskInfoList: flitList.length === 0 ? [] : flitList
          })
        }
      })
      this.generateMap(Arr)
    },
    generateMap (List) {
      const th = this
      this.map.remove(this.markerList); // 删除所有点位
      th.markerList = []
      List.forEach(item => {
        if (item.inspectionTaskInfoList.length === 0) return false
        let text = `<div style='background: url(${require('../../assets/images/bimapbg.png')}) no-repeat;background-size: cover;color:#fff;padding:5px 10px 20px 10px;border-radius:3px;'> `
        let texttwo = []
        if (item.position == '0') {
          text += `<br> 建筑物名称 # ${item.buildingName} <br> <br>`
        }
        let img;
        item.inspectionTaskInfoList.forEach((element, index) => {

          if (index < 5) {
            texttwo.push(`<span style='color:${['#fec865', '#3dce8c', '#ff6974'][element.status]}'>${index + 1}. ${element.equipmentName}<span style='font-weight:900;float:right;padding:2px 4px;border-radius: 5px;border: 1px solid ${['#fec865', '#3dce8c', '#ff6974'][element.status]};box-shadow: 0 0 0 1px ${['#fec865', '#3dce8c', '#ff6974'][element.status]}, inset 0 0 10px ${['#fec865', '#3dce8c', '#ff6974'][element.status]};'>${['待巡检', '已巡检', '延期巡检'][element.status]}</span></span>`)
          } else if (index == 5) {
            texttwo.push(`......`)
          } else {
            return false
          }
        })
        if (item.position == '1') {
          if (item.inspectionTaskInfoList.length >= 1) {
            img = [th.Assay, th.LvDa, th.RedDa][item.inspectionTaskInfoList[0].status]
          }
        } else {
          if (item.inspectionTaskInfoList.length >= 1) {
            img = [th.Huangmin, th.Lvmin, th.Redmin][item.inspectionTaskInfoList[0].status]
          }
        }
        var icon = new AMap.Icon({
          size: item.position == '1' ? new AMap.Size(28, 28) : new AMap.Size(24, 29),   // 图标尺寸
          image: img,
          // image: item.position == '1' ? [th.Assay, th.LvDa, th.RedDa][item.inspectionTaskInfoList[0].status && item.inspectionTaskInfoList[0].status || ''] : [th.Huangmin, th.Lvmin, th.Redmin][item.inspectionTaskInfoList[0].status && item.inspectionTaskInfoList[0].status || ''],  // Icon的图像
          // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: item.position == '1' ? new AMap.Size(28, 28) : new AMap.Size(24, 29),   // 根据所设置的大小拉伸或压缩图片
        });
        var marker = new AMap.Marker({
          offset: new AMap.Pixel(-13, -26),
          position: new AMap.LngLat(item.longitude * 1, item.latitude * 1),
          icon: icon,
        });
        let textstr = texttwo.join('<br><br>')
        let wei = `</div>`
        let texts = text + textstr + wei
        // 创建 infoWindow 实例	
        var infoWindow = new AMap.InfoWindow({
          content: texts,  //传入 dom 对象，或者 html 字符串
          isCustom: true,  //使用自定义窗体
          anchor: 'top-center',
        });
        let wenben = `<div style='background: url(${require('../../assets/images/bimapbg.png')}) no-repeat;background-size: cover;color:#fff;padding:15px 10px;border-radius:3px;max-height:250px;overflow:scroll;overflow-y: auto;overflow-x: auto;'>`
        let wenbentwo = []
        if (item.position == '0') {
          text += `<br/>建筑物名称 # ${item.buildingName}<br/><br/>`
        }
        item.inspectionTaskInfoList.forEach((element, index) => {
          wenbentwo.push(`<span style='color:${['#fec865', '#3dce8c', '#ff6974'][element.status]}'>${index + 1}. ${element.equipmentName}<span style='font-weight:900;float:right;padding:2px 4px;border-radius: 5px;border: 1px solid ${['#fec865', '#3dce8c', '#ff6974'][element.status]};box-shadow: 0 0 0 1px ${['#fec865', '#3dce8c', '#ff6974'][element.status]}, inset 0 0 10px ${['#fec865', '#3dce8c', '#ff6974'][element.status]};'>${['待巡检', '已巡检', '延期巡检'][element.status]}</span></span>`)
        })
        let wenbenstr = wenbentwo.join('<br><br>')
        let neirong = wenben + wenbenstr + wei
        // 创建 infoWindow 实例	
        var infoWindowClick = new AMap.InfoWindow({
          content: neirong,  //传入 dom 对象，或者 html 字符串
          isCustom: true,  //使用自定义窗体
          anchor: 'top-center',
        });
        marker.on('click', function (e) {//标记鼠标悬浮
          infoWindowClick.open(th.map, [item.longitude * 1, item.latitude * 1]);
        });
        marker.on('mouseover', function (e) {//标记鼠标悬浮
          infoWindow.open(th.map, [item.longitude * 1, item.latitude * 1]);
        });
        marker.on('mouseout', function (e) {//标记鼠标离开
          infoWindow.close();
        });
        this.map.add(marker)
        th.markerList.push(marker)
        // this.map.addControl(new AMap.Scale());
      });
    },
    //设置指定行、列、具体单元格颜色
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2) { //指定坐标rowIndex ：行，columnIndex ：列
        return 'background:#0c184d;color:#fff' //rgb(105,0,7)
      } else {
        return 'background:#010339;color:#fff' //rgb(105,0,7)
      }
    },
    preInit () {
      this.timerPreSetInterval = setTimeout(() => {
        var myChart = echarts.init(this.$refs.presid)
        var myChartweixiu = echarts.init(this.$refs.preweixiu)
        let option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            textStyle: {
              color: '#fff',
            },
            // orient: 'vertical',
            left: 'left',
            top: 'top',
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: this.$parent.TimePre,
              itemStyle: {
                normal: {
                  color: (params) => {
                    let colorList = ['#f43f3b', '#ec008c', '#39b54a', '#ff9700', '#6739b6', '#1cbbb4']
                    return colorList[params.dataIndex]
                  }
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        let optionweixiu = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            textStyle: {
              color: '#fff',
            },
            orient: 'vertical',
            right: 'right',
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: this.repairList,
              itemStyle: {
                normal: {
                  color: (params) => {
                    let colorList = ['#ec008c', '#39b54a', '#ff9700', '#6739b6', '#1cbbb4']
                    return colorList[params.dataIndex]
                  }
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        myChart.setOption(option)
        myChartweixiu.setOption(optionweixiu)
        let index = 4;//默认选中第二个
        let myCharts = myChart; //解决echarts中this指向问题
        myCharts.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 4,//默认选中第二个
        });
        myCharts.on('mouseover', function (e) {
          if (e.dataIndex != index) {
            myCharts.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index,
            });
          }
        });
        myCharts.on('mouseout', function (e) {
          index = e.dataIndex;
          myCharts.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        });
        // myChart.on("click", this.eConsole);
      }, 200)
    },
    timeinit () {
      this.recordSetInterval = setTimeout(() => {
        var myChart = echarts.init(this.$refs.dateid, 'dark')//深夜模式
        let option = {
          tooltip: {
            trigger: 'axis',
            textStyle: {
              color: '#fff',
            }
          },
          backgroundColor: '', //设置无背景色
          color: ['#8dc63f', '#409EFF'],
          legend: {
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          textStyle: {
            color: '#fff',
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.$parent.TimeName,
              textStyle: {
                color: '#fff',
              },
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '实际巡检数量',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: this.$parent.TimeNum2
            },
            {
              name: '计划巡检数量',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: this.$parent.TimeNum1
            }

          ]
        }
        myChart.setOption(option)
      }, 20)
    },
    initEcharts () {
      this.timeEchar = setTimeout(() => {
        var myChartRight = echarts.init(document.getElementById('EcharIdStatus'));
        let optionRight = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
                normal: {
                  color: (params) => {
                    let colorList = ['#409EFF', '#67C23A', '#FFC0CB', '#8A2BE2', '#00FA9A', '#F56C6C', '#E6A23C', '#909399', '#409EFF', '#67C23A']
                    return colorList[params.dataIndex]
                  }
                }
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '36',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false,
                color: '#fff'
              },
              data: this.$parent.userStatus
            }
          ]
        }

        myChartRight.setOption(optionRight)
        let index = 0;//默认选中第二个
        let myChart = myChartRight; //解决echarts中this指向问题
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0,//默认选中第二个
        });
        myChart.on('mouseover', function (e) {
          if (e.dataIndex != index) {
            myChart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index,
            });
          }
        });
        myChart.on('mouseout', function (e) {
          index = e.dataIndex;
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        });
      }, 20);
    }
  }

}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>